<template>
	<ul class="timeline">
		<li class="start" style="margin-bottom:20px">
			<el-select
				v-model="type"
				style="width: 120px"
				:disabled="flag"
				@change="$emit('newOrOldChange', type)"
			>
				<el-option :value="0" label="全部" />
				<el-option :value="1" label="新客" />
				<el-option :value="2" label="老客" />
			</el-select>
		</li>
		<li
			v-for="item in times"
			:key="item.start"
			class="time-wrap"
			:class="{ bold: item.bold, recent: recentTime.time == item.start }"
		>
			<div class="start-wrap">{{ item.start }}</div>
			<el-popover
				popper-class="time-line-popper el-tooltip__popper is-dark"
				placement="top-start"
				width="200"
				trigger="hover"
			>
				<div class="ben-wrap" slot="reference">
					<span>{{ item.isUse }}</span>
					<span class="separae">/</span>
					<span>{{ item.bed_all || 0 }}</span>
				</div>
				<div>
					共{{ item.bed_all }}张床位，已约了{{ item.isUse }}张床位剩余可约床位{{
						item.canUse
					}}张
				</div>
			</el-popover>
			<!-- <div v-if="recentTime.time == item.start">
				最近时间
			</div> -->
		</li>
		<li class="end" :class="{ bold: endBold }" v-if="this.lastTime">
			{{ this.lastTime.end }}
		</li>
	</ul>
</template>
<script>
import dayjs from "dayjs";
import { last } from "cl-admin/utils";
export default {
	data() {
		return {
			type: this.cus_type
		};
	},
	props: {
		list: {
			type: Array,
			default: () => []
		},
		recentTime: {
			type: Object,
			default: () => ({})
		},
		cus_type: {
			type: Number,
			default: 0
		},
		flag: {
			type: Boolean,
			default: false
		},
		bed: {
			default: 0 || "0"
		}
		// cart_num:{
		// 	type: Number||String,
		// 	default: 0
		// }
	},
	computed: {
		times() {
			return this.list.map(v => ({
				...v,
				bold: dayjs(v.date + " " + v.start).minute() == 0
			}));
		},
		lastTime() {
			return last(this.list);
		},
		endBold() {
			if (!this.lastTime) return false;
			return dayjs(this.lastTime.date + " " + this.lastTime.end).minute() == 0;
		}
	}
};
</script>
<style lang="scss" scoped>
.timeline {
	position: sticky;
	left: 0;
	width: 100px;
	// padding-top: 30px;
	background: #fff;
	z-index: 10;
	// box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #fff, 1px 1px 0 0 #fff, inset 1px 0 0 0 #fff,
	// 	inset 0 1px 0 0 #fff;
	li {
		font-size: 14px;
		line-height: 1;
		&:not(:last-child):not(:first-child) {
			height: 50px;
		}
		&:first-child {
			height: 30px;
			background: #fff;
			position: sticky;
			top: 0;
			box-shadow: 1px 0 0 0 #fff, 0 1px 0 0 #fff;
		}
		&:last-child {
			margin-top: -14px;
		}
		&.bold {
			font-weight: 600;
		}
		&.time-wrap {
			display: flex;
			.start-wrap {
				margin-top: 6px;
			}
			.ben-wrap {
				height: 26px;
				display: inline-flex;
				align-items: center;
				padding: 0 6px;
				margin-left: 10px;
				margin-top: 1px;
				border: 1px solid $primary;
				border-radius: 8px;
				color: $primary;
				background-color: #f3e9ff;
				.separae {
					margin: 0 1px;
				}
			}
		}
		// &.recent {
		// 	font-weight: 600;
		// 	color: $color-primary;
		// }
	}

	.time-line-popper {
	}
}
</style>
